<template>
    <!--auth.vue 登录授权页 -->
    <div>
        <mu-appbar title="货车兄弟">
        </mu-appbar>
        <div id="id_auth">
            <mu-text-field
            v-model='userName'
            :label='userNameLabel'
            :errorText="userNameErrorText"
            required
            fullWidth
            labelFloat
            type="number"
            :hintText="userNameHintText"
            @textOverflow="handleUseNameOverflow"
            :maxLength="11"/>

            <br/>

            <mu-text-field
            :label="passwordLabel"
            v-model='password'
            :errorText="passwordErrorText"
            required
            :hintText="passwordHintText"
            type="password"
            @textOverflow="passwordErrorText"
            fullWidth
            labelFloat/>

       </div>

        <mu-raised-button
        :label="loginLabel"
        v-on:click="handleLogin"
        class="login-raised-button"
        primary/>
    </div>
</template>


<style scoped>
 #id_auth{
     margin-left:1rem;
     margin-right:1rem;
 }
 .mu-text-field{
     padding-left:0.5rem;
     padding-right:0.5rem;
     text-align: left;
 }

 .login-raised-button {
    margin-top:1rem;
    width:12rem;
}

</style>


<script>
// resolve: {
//     // 自动补全的扩展名
//     extensions: ['.js', '.vue', '.json'],
//     // 默认路径代理
//     // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
//     alias: {
//         '@': resolve('src'),
//         '@config': resolve('config'),
//         'vue$': 'vue/dist/vue.common.js'
//     }
// }
import login from '@/assets/text/login.zh.json';
// import { Toast } from 'mint-ui';
import { getCookie } from '@/cookie/cookie';

export default {
  data() {
    return {
      userName: '15108280908',
      password: 'qw123456',
      userNameLabel: login.userNameLabel,
      passwordLabel: login.passwordLabel,
      loginLabel: login.loginLabel,
      userNameHintText: login.userNameHintText,
      passwordHintText: login.passwordHintText,
      userNameErrorText: '',
      passwordErrorText: '',
      token: getCookie('token'),
    };
  },
  created() {
  },
  computed: {
    getToken() {
      return this.$store.getters.getToken;
    },
  },
  methods: {
    handleUseNameOverflow(isOverflow) {
      this.userNameErrorText = isOverflow ? login.userNamelimit : '';
    },
    handlePasswordOverflow(isOverflow) {
      this.passwordErrorText = isOverflow ? login.passwordLimit : '';
    },
    // curl -d 'service=com.xgggh.srv.oauth2' \
    handleLogin() {
      const params = {
        userName: this.userName,
        password: this.password,
      };
      this.$store.dispatch('authrize', params);
    },
  },
  watch: {
    getToken: function token(newToken) {
      if (newToken) {
        const redirect = this.$route.query.redirect;
        if (!redirect) {
          this.$router.replace('main');
        } else {
          this.$router.replace(redirect);
        }
      }
    },
  },
};

</script>
